<!--
  -- Copyright 2015 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<style>
  /* Controls bar. */
  .controls {
    align-items: center;
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 96px;
    justify-content: center;
    padding: 0;
  }

  .controls .upper-controls,
  .controls .lower-controls {
    box-sizing: border-box;
    height: 48px;
    padding: 8px;
    width: 100%;
  }

  .audio-controls {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }

  /* Customized scrollbar for the playlist. */

  .media-button {
    background-color: transparent;
    border: 0;
    flex: none;
    height: 32px;
    outline: none;  /* TODO(yoshiki): Show outline only on keyboard focus. */
    padding: 0;
    position: relative;
    width: 32px;
  }

  .media-button > div,
  .media-button.toggle > label > span {
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    height: 100%;
    pointer-events: none;
    transition: opacity 100ms linear;
    width: 100%;
  }

  .media-button > div {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
  }

  /* Time and volume controls. */

  .time-volume-controls {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
  }

  .time-volume-controls > .time-container {
    color: rgb(51, 51, 51);
    cursor: default;
    flex: none;
    font-size: 12px;
    padding: 8px;
    position: relative;
  }

  .time-container > .time {
    position: absolute;
    right: 8px; /* Should be same as time-container's right padding. */
    top: 8px; /* Should be same as time-container's top padding. */
  }

  .time-container > .time-spacer {
    opacity: 0; /* This class is intended to be used as invisible spacer. */
  }

  .time-volume-controls > cr-slider {
    --cr-slider-active-color: rgb(66, 133, 244);
    --cr-slider-knob-color-rgb: 64, 138, 241;
  }

  cr-slider {
    cursor: pointer;
  }

  #timeSlider {
    flex: 3 1 auto;
    width: 118px;
  }

  #volumeSlider {
    flex: 1 1 auto;
    width: 82px;
  }

  /* Media controls in order of appearance. */

  .audio-controls {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
  }

  /* Play/pause button. */

  .media-button.toggle input {
    position: absolute;
    visibility: hidden;
  }

  .media-button.shuffle-mode {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_shuffle.png) 1x,
        url(../assets/200/player_button_shuffle.png) 2x);
    pointer-events: auto;
  }

  .media-button.repeat-mode {
    margin-left: 8px;
    margin-right: 0;
  }

  .media-button.play {
    margin-left: 4px;
    margin-right: 4px;
  }

  .media-button.play {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_play.png) 1x,
        url(../assets/200/player_button_play.png) 2x);
  }

  :host([playing]) .media-button.play {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_pause.png) 1x,
        url(../assets/200/player_button_pause.png) 2x);
  }

  .media-button.previous {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_previous.png) 1x,
        url(../assets/200/player_button_previous.png) 2x);
    margin-left: 8px;
    margin-right: 0;
  }

  .media-button.next {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_next.png) 1x,
        url(../assets/200/player_button_next.png) 2x);
    margin-left: 0;
    margin-right: 8px;
  }

  .media-button.playlist {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_playlist.png) 1x,
        url(../assets/200/player_button_playlist.png) 2x);
    pointer-events: auto;
  }

  .media-button.volume {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_volume.png) 1x,
        url(../assets/200/player_button_volume.png) 2x);
    pointer-events: auto;
  }

  :host([volume='0']) .media-button.volume {
    background-image: -webkit-image-set(
        url(../assets/100/player_button_volume_muted.png) 1x,
        url(../assets/200/player_button_volume_muted.png) 2x);
  }

  /* Invisible div used to compute the width required for the elapsed time. */
  .time-controls > .time > .current {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: flex-end;
    position: absolute;
    top: -1px;
  }
</style>
<div class="controls">
  <div class="upper-controls audio-controls">
    <!-- Shuffle toggle button in the bottom line. -->
    <files-icon-button toggles
        id="shuffle"
        class="shuffle-mode media-button toggle"
        active="{{shuffle}}">
    </files-icon-button>

    <!-- RepeatMode toggle button in the bottom line. -->
    <repeat-button
        id="repeat"
        class="repeat-mode media-button"
        repeat-mode="{{repeatMode}}">
    </repeat-button>

    <!-- Prev button in the bottom line. -->
    <files-icon-button
        id="previous"
        class="previous media-button"
        on-click="previousClick">
    </files-icon-button>

    <!-- Play button in the bottom line. -->
    <files-icon-button
        id="play"
        class="play media-button"
        on-click="playClick">
    </files-icon-button>

    <!-- Next button in the bottom line. -->
    <files-icon-button
        id="next"
        class="next media-button"
        on-click="nextClick">
    </files-icon-button>

    <!-- Playlist button in the bottom line. -->
    <files-icon-button toggles
        id="playList"
        class="playlist media-button toggle"
        active="{{playlistExpanded}}">
    </files-icon-button>
  </div>
  <div class="lower-controls time-volume-controls">
    <!-- Play/pause button and seek slider in the bottom line. -->
    <div class="time-container">
      <div class="time-spacer">[[computeTimeString_(duration, duration)]]</div>
      <div class="time">[[computeTimeString_(time, duration)]]</div>
    </div>
    <cr-slider id="timeSlider" max="[[duration]]" value="[[time]]"
        on-dragging-changed="onSeekingChanged_" no-keybindings></cr-slider>
    <!-- Volume button and slider in the bottom line. -->
    <files-icon-button
        id="volumeButton"
        class="volume media-button"
        on-click="volumeClick">
    </files-icon-button>
    <cr-slider id="volumeSlider"></cr-slider>
  </div>
</div>
